<template>
  <div class="product-single">
    <!-- 因为所有商品都是一样的模板，所以创建单个组件 -->
    <div class="header_product_details" v-for="item of pain" :key="item.index">
      <img :src="item.img" alt class="header_product_details_img">
      <div class="header_product_details_right">
        <p class="header_product_details_title">{{item.title}}</p>
        <p class="header_product_details_content">{{item.content}}</p>
        <div class="header_product_details_footer">
          <p class="header_product_details_price">￥{{item.price}}</p>
          <div class="header_product_details_link">购买</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["pain"]
};
</script>

<style scoped>
div.product-single {
  width: 95%;
  margin: 0 auto;
}
.header_product_details_img {
  border-radius: 20px;
}
div.header_product_details {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 14px;
}
div.header_product_details_footer {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
div.header_product_details_link {
  border: 1px solid #eb6c7f;
  background: #eb6c7f;
  color: #fbeaec;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 8px;
}
div.header_product_details_right {
  margin-left: 14px;
}
p.header_product_details_title {
  font-weight: 900;
  color: #3b3b3b;
  font-size: 15px;
}
p.header_product_details_content {
  color: #86928e;
}
p.header_product_details_price {
  color: #dc0d0d;
  line-height: 28px;
}
</style>
